import { useSelector, useDispatch } from 'umi';
// import { useEffect } from 'react';

const Index = () => {
  // useSelector用来获取仓库的数据的
  // state后面要加模块名称
  const count = useSelector((state: any) => state.index.count);
  const list = useSelector((state: any) => state.index.list);
  // useDispatch用于调用仓库的方法
  const dispatch = useDispatch();

  // useEffect(() => {
  //   // 在组件里面调用同步和异步都是调用dispatch
  //   dispatch({ type: 'index/load' });
  // }, [dispatch]);

  return (
    <>
      <h2>dva</h2>
      <button>-</button>
      <span>{count}</span>
      {/* type也需要加模块名称 */}
      <button onClick={() => dispatch({ type: 'index/add' })}>+</button>

      <hr />

      <ul>
        {list.map((item: any) => (
          <li key={item._id}>{item.title}</li>
        ))}
      </ul>
    </>
  );
};

export default Index;
